<template>
  <div class="app-container">
    <el-form
      :model="queryParams"
      ref="queryForm"
      :inline="true"
      label-width="120px"
    >
      <el-form-item label="人员姓名" prop="personName">
        <el-input
          v-model="queryParams.personName"
          placeholder="人员姓名"
          clearable
          size="small"
          @keyup.enter.native="getList"
          @change="getList"
        />
      </el-form-item>
      <!-- <el-form-item label="人员卡编码" prop="psPersonCard">
        <el-input
          v-model="queryParams.psPersonCard"
          placeholder="人员卡编码"
          clearable
          size="small"
          @keyup.enter.native="getList"
          @change="getList"
        />
      </el-form-item> -->
      <el-form-item label="区队班组/部门" prop="psPersonDept">
        <el-select
          v-model="queryParams.psPersonDept"
          placeholder="请选择部门"
          clearable
          filterable
          size="small"
          @clear="getList"
          @change="getList"
          :popper-append-to-body="false"
        >
          <el-option
            v-for="(dicts, index) in DeptList"
            :key="index"
            :label="dicts"
            :value="dicts"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="工种/职务" prop="psPersonDuty">
        <el-select
          v-model="queryParams.psPersonDuty"
          placeholder="请选择工种"
          clearable
          filterable
          size="small"
          @clear="getList"
          @change="getList"
          :popper-append-to-body="false"
        >
          <el-option
            v-for="(item, e) in DutyList"
            :key="e"
            :label="item"
            :value="item"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="报警类型" prop="PsAlarmType">
        <el-select
          v-model="queryParams.PsAlarmType"
          placeholder="请选择报警类型"
          clearable
          filterable
          size="small"
          @clear="getList"
          @change="getList"
          :popper-append-to-body="false"
        >
          <el-option
            v-for="(item, e) in PoliceList"
            :key="e"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item label="时间" prop="time">
        <el-date-picker
          v-model="queryParams.time"
          type="date"
          placeholder="选择日期"
          @change="handleTime"
        >
        </el-date-picker>
      </el-form-item>
      <el-form-item>
        <el-button
          type="primary"
          icon="el-icon-search"
          size="mini"
          @click="getList"
          >搜索</el-button
        >
        <el-button
          icon="el-icon-refresh"
          size="mini"
          @click="resetForm('queryForm')"
          >重置</el-button
        >
        <el-button
          type="primary"
          icon="el-icon-download"
          size="mini"
          @click="exportlist"
          >导出</el-button
        >
      </el-form-item>
    </el-form>
    <el-table
      v-loading="loading"
      :data="tableList"
      :header-cell-style="thaderBack"
    >
      <el-table-column label="序号" width="80">
        <template slot-scope="scope">
          <span style="margin-left: 10px">{{ scope.$index + 1 }}</span>
        </template>
      </el-table-column>
      <el-table-column prop="psPersonName" label="人员姓名"> </el-table-column>
      <el-table-column prop="psPersonCard" label="人员卡编码">
      </el-table-column>
      <el-table-column prop="psPersonDuty" label="工种/职务"> </el-table-column>
      <el-table-column prop="psPersonDept" label="区队班组/部门">
      </el-table-column>
      <el-table-column prop="psMineEntertime" label="入井时间" width="200">
      </el-table-column>
      <el-table-column
        prop="psAlarmType"
        label="报警类型"
        show-overflow-tooltip
      >
        <template slot-scope="scope">
          <span>{{
            scope.row.psAlarmType == '4'
              ? '矿井超员'
              : scope.row.psAlarmType == '5'
              ? '重点区域超员'
              : scope.row.psAlarmType == '6'
              ? '限制区域有人'
              : scope.row.psAlarmType == '7'
              ? '人员超时'
              : ''
          }}</span>
        </template>
      </el-table-column>
    </el-table>
    <pagination
      v-show="total > 0"
      :total="total"
      :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize"
      @pagination="getList"
    />
  </div>
</template>

<script>
import {
  listInfo,
  getInfo,
  delInfo,
  addInfo,
  updateInfo,
  exportlist,
} from '@/api/personnel/callpolice'
export default {
  data() {
    return {
      queryParams: {
        csMineCode: '',
        inOutType: '',
        ssTransducerCode: '',
        ssTransducerPoint: '',
        ssTransducerTypeName: '',
        psPersonDept: '',
        time: '',
        pageNum: 1,
        pageSize: 10
      },
      queryParams2: {
        personName: "",
        psPersonDept: "",
        psPersonDuty: "",
        PsAlarmType: "",
        time:''
      },
      query: {
        pageNum: 1,
        pageSize: 10
      },
      csMineName: '',
      total: 0,
      names: '',
      tableList: [],
      coalmineList: [],
      MineCode: '',
      MineName: '',
      info: {},
      typeList: [
        {
          value: '0',
          label: '0点班'
        },
        {
          value: '4',
          label: '4点班'
        },
        {
          value: '8',
          label: '8点班'
        }
      ],
      DeptList: [],
      DutyList: [],
      PoliceList: [
        {
          label: '矿井超员',
          value: '4'
        },
        {
          label: '重点区域超员',
          value: '5'
        },
        {
          label: '限制区域有人',
          value: '6'
        },
        {
          label: '人员超时',
          value: '7'
        }
      ]
    }
  },
  methods: {
    cellStyleFun() {
      return 'text-align:center'
    },
    thaderBack() {
      return {
        // background: '#0069eb',
        // color: '#fff',
        // textAlign: 'center',
        fontSize: '0.14rem'
      }
    },
    /** 重置按钮操作 */
    resetForm(form) {
      if (this.$refs[form] !== undefined) {
        this.$refs[form].resetFields()
      }
      this.getList()
    },
    tableRowClassName({ rowIndex }) {
      if (rowIndex % 2 == 0) {
        return 'evencolor'
      } else {
        return 'oddcolor'
      }
    },
    // 获取部门
    getDept() {
      listInfo().then(res => {
        this.DeptList = res.data
      })
    },
    // 获取工种
    getDuty() {
      getInfo().then(res => {
        this.DutyList = res.data
      })
    },
    getList() {
      this.loading = true
      addInfo(this.queryParams).then(res => {
        if (res.code === 200) {
          res = res.data
          this.tableList = res.data
          this.total = res.total
          this.loading = false
        }
      })
    },
    handleTime(e) {
      this.queryParams.time = this.formatDate(e)
      this.getList()
    },
    formatDate(date) {
      // 设置时间转换格式
      var y = date.getFullYear() // 获取年
      var m = date.getMonth() + 1 // 获取月
      m = m < 10 ? '0' + m : m // 判断月是否大于10
      var d = date.getDate() // 获取日
      d = d < 10 ? '0' + d : d // 判断日期是否大10
      return y + '-' + m + '-' + d // 返回时间格式
    },
    
    exportlist() {
      this.queryParams2.personName = this.queryParams.personName;
      this.queryParams2.psPersonDept = this.queryParams.psPersonDept;
      this.queryParams2.psPersonDuty = this.queryParams.psPersonDuty;
      this.queryParams2.PsAlarmType = this.queryParams.PsAlarmType;
      this.queryParams2.time = this.queryParams.time;
      exportlist(this.queryParams2).then((response) => {
          this.downLoadFile(response, '导出')
        })
        .catch((err) => {
          this.$message('导出异常:' + err)
        })
    },
    downLoadFile(fileStream, fileName = 'test') {
      let link = document.createElement('a')
      //type就是blob的type,是MIME类型的，可以自己查看MIME类型都有哪些
      let blogw = new Blob([fileStream], {
        type: 'application/vnd.ms-excel;charset=utf-8'
      })
      let objectUrl = window.URL.createObjectURL(blogw) //创建一个新的url对象
      link.href = objectUrl
      let file_name = decodeURI(`${fileName}列表.xlsx`)
      link.download = file_name //  下载的时候自定义的文件名
      link.style.display = 'none'
      document.body.appendChild(link)
      link.click()
      link.parentNode.removeChild(link)
      window.URL.revokeObjectURL(objectUrl)
    },
  },
  created() {
    this.getDept()
    this.getDuty()
    this.getList()
  }
}
</script>

<style lang="scss" scoped></style>
